<template>
  <div id="app">
   <div class="page">
        <div id="filePicker" >选择文件</div>

        <div class="file-panel">
            <h2>文件列表</h2>
                <el-table :data="fileList" style="width: 100%">
                    <el-table-column prop="name" label="文件名" width="180" />
                    <el-table-column prop="type" label="文件类型" width="180" />
                    <el-table-column prop="size" label="文件大小" width="180" />
                    <el-table-column prop="status" label="文件上传状态" />
                    <el-table-column fixed="right" label="操作" width="200">
                        <template #default>
                            <el-button type="text" size="small" @click="resume()"
                            >开始</el-button
                            >
                            <el-button type="text" size="small" @click="stop()">暂停</el-button>
                            <el-button type="text" size="small" @click="remove()">移除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
        </div>
  </div>
   <web-upload ref="uploader" url="" 
                uploadButton="#filePicker"
                multiple
                @fileChange="fileChange"
                @progress="onProgress"
                @success="onSuccess"></web-upload>
  </div>
</template>

<script>
import WebUpload from './components/WebUpload.vue'
import $ from 'jquery'
import WebUploader from 'webuploader'
export default {
  name: 'App',
  components: {
    WebUpload
  },
  data() {
    return {
      fileList: [
          {name:'测试文档',type: 'txt',size: '10M',status: '上传完成'}
      ],
    }
  },
  methods: {
     fileChange(file) {
          if (!file.size) return;
          this.fileList.push(file);
      },
      onProgress(file, percent) {
          $(`.file-${file.id} .progress`).css('width', percent * 100 + '%');
          $(`.file-${file.id} .file-status`).html((percent * 100).toFixed(2) + '%');
      },
      onSuccess (file, response) {
        if (response.needMerge) {
            api.mergeUpload({
                tempName: response.tempName,
                fileName: file.name
            }).then(res => {
                let $fileStatus = $(`.file-${file.id} .file-status`);
                console.log(res);
                if (res.status === 0) {
                    $fileStatus.html('上传成功，转码中');
                } else if (res.status === 1) {
                    $fileStatus.html('上传失败');
                } else if (res.status === 2) {
                    $fileStatus.html('上传成功');
                }
            });
        }
      },
       resume(file) {
          this.uploader.upload(file);
       },
      stop(file) {
          this.uploader.stop(file);
      },
      remove(file) {
            // 取消并中断文件上传
            this.uploader.cancelFile(file);
            // 在队列中移除文件
            this.uploader.removeFile(file, true);
            // 在ui上移除
            let index = this.fileList.findIndex(ele => ele.id === file.id);
            this.fileList.splice(index, 1);
        },
        fileSize(size) {
              return WebUploader.Base.formatSize(size);
        },
         fileCategory(ext) {
            let type = '';
            const typeMap = {
                image: ['gif', 'jpg', 'jpeg', 'png', 'bmp', 'webp'],
                video: ['mp4', 'm3u8', 'rmvb', 'avi', 'swf', '3gp', 'mkv', 'flv'],
                text: ['doc', 'txt', 'docx', 'pages', 'epub', 'pdf', 'numbers', 'csv', 'xls', 'xlsx', 'keynote', 'ppt', 'pptx']
            };
            Object.keys(typeMap).forEach((_type) => {
                const extensions = typeMap[_type];
                if (extensions.indexOf(ext) > -1) {
                    type = _type
                }
            });
            return type
        },

  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

</style>
